<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo left">
      <el-select v-model="searchInfoMations.type" clearable style="width:120px;" placeholder="资讯类型">
        <el-option v-for="item in options" :key="item.val" :label="item.key" :value="item.val" />
      </el-select>
      <el-select
        v-model="searchInfoMations.topic"
        placeholder="主题类型"
        style="width:120px;"
        v-if="this.dicsCode.INFORMATION_TOPIC"
      >
        <el-option
          v-for="item in this.dicsCode.INFORMATION_TOPIC.children"
          :key="item.dicCode"
          :label="item.dicName"
          :value="item.dicCode"
        ></el-option>
      </el-select>
      <el-select
        v-model="searchInfoMations.status"
        clearable
        style="width:120px;"
        placeholder="是否发布"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.val"
          :label="item.key"
          :value="item.val"
        />
      </el-select>
      <el-input v-model="searchInfoMations.tittle" style="width:140px;" placeholder="请输入标题" />
      <el-input v-model="searchInfoMations.nickName" style="width:140px;" placeholder="请输入用户昵称" />
      <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
    </div>
    <el-button
      v-if="accreditChildren.createInformation"
      class="right"
      type="primary"
      @click="jump('create')"
    >新建资讯</el-button>
    <el-table ref="table" :height="this.$getTableHeight" :data="tableData" stripe border>
      <el-table-column show-overflow-tooltip label="标题">
        <template slot-scope="scope">
          <span class="blue" @click.stop="changeActive(scope.row.id)">{{ scope.row.tittle }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="nickName" label="发帖人" width="120px;" />
      <el-table-column show-overflow-tooltip label="主题" width="120px;">
        <template slot-scope="scope">{{ getName(scope.row) }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="类型" width="120px;">
        <template
          slot-scope="scope"
        >{{ scope.row.type === 0 ? "生意资讯" : scope.row.type === 1 ? "生意圈" :scope.row.type === 2 ? '线下沙龙' :scope.row.type === 3 ? '新闻快讯' :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="是否发布" width="100px;">
        <template
          slot-scope="scope"
        >{{ scope.row.status === true ? "是":scope.row.status === false ? '否' :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.tittle">
            <span
              v-if="accreditChildren.deleteInformation"
              class="_delete"
              @click="deleteInforMathion(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新建资讯' : '编辑资讯'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <create :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mmUrl from "~/utils/utilUrl";
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from "~/utils/util";
import detail from "~/components/informationManage/detail";
import Pagination from "~/components/commom/pagination";
import initData from "~/utils/initData";
import create from "~/components/informationManage/create";
export default {
  components: {
    Pagination,
    detail,
    create
  },
  data() {
    return initData.InfomationManage;
  },
  mounted() {
    this.getInitDate();
    const result = JSON.parse(sessionStorage.getItem("menu"));
    this.accreditArr = reduceArr(result, "/" + this.$route.name);
    this.accreditChildren = createDics(
      this.accreditArr.children,
      "permissionCode"
    );
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.updateRight = !this.updateRight;
    },
    clearJumpId() {
      this.active = false;
      this.jumpId = null;
    },
    changeActive(id) {
      this.active = true;
      this.jumpId = id;
    },
    openDialog() {
      this.isCreate = false;
      this.dialogVisible = true;
    },
    jump(id) {
      this.dialogVisible = true;
      this.jumpId = id;
      id === "create" ? (this.isCreate = true) : (this.isCreate = false);
    },
    searchInfoMation(res) {
      this.copySearchInfoMations = JSON.parse(
        JSON.stringify(this.searchInfoMations)
      );
      const result = _searchInfo(res, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    changeTableData(res) {
      const that = this;
      _changeTable(mmUrl.Infomation.get, res, that);
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfoMations);
      this.changeTableData(result);
    },
    deleteInforMathion(row) {
      const that = this;
      _deleteMethods(mmUrl.Infomation.delete, row, that).then(() => {
        that.searchInfoMation("no");
      });
    },
    getName(row) {
      if (row.topic) {
        for (var i in this.dicsCode) {
          // 如果不为空，则会执行到这一步，返回true
          return this.dicsCode.INFORMATION_TOPIC.children
            ? this.dicsCode.INFORMATION_TOPIC.children.filter(
                v => v.dicCode === row.topic
              )[0].dicName
            : "";
        }
      }
    },
    getInitDate() {
      const data = {};
      data.page = JSON.parse(JSON.stringify(this.page));
      Object.assign(data, this.searchInfoMations);
      this.$post({
        url: mmUrl.Infomation.pageLoad,
        data: data
      }).then(res => {
        this.dicsCode = createDics(res.dics, "dicCode");
        this.tableData = res.items.items;
        this.totalCount = res.items.totalCount;
        this.loading = false;
        changeTableHeight(this);
      });
    }
  }
};
</script>

<style>
</style>
